<template>
  <div class="add-modal">
    <div class="add">
      <input
      type="text"
      v-for="(d) in formList"
      :key="d.field"
      :placeholder="d.label"
      v-model="d.value"
    >

      <button @click="$emit('close')">取消</button>
      <button @click="submit">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formList: [
        {
          label: '唱片',
          field: 'album',
          value: ''
        },
        {
          label: '歌手',
          field: 'singer',
          value: ''
        },
        {
          label: '价格',
          field: 'price',
          value: ''
        },
        {
          label: '库存',
          field: 'number',
          value: ''
        }
      ]
    }
  },
  methods: {
    submit() {
      const obj = {};
      this.formList.forEach(i => {
        obj[i.field] = i.value;
      })
      this.$emit('add', obj);
    }
  }
}
</script>


<style lang="sass">
.add-modal
  display: flex
  justify-content: center
  align-items: center
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgba(0, 0, 0, .6)
  .add
    background: #fff
    padding: 20px
    width: 600px
    height: 400px
    display: flex
    flex-direction: column

</style>
